﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
    html, body {
        height: 100%;
        margin: 100px;
        padding: 0px
    }
       #Recorrido { 
float: left; 
width: 59%; 
} 
    #Reloj { 
float: right; 
width: 39%; 
} 
</style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="LibreriasScript/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="LibreriasScript/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="LibreriasScript/JQuery/jquery-1.11.0.min.js"></script>
    <script src="LibreriasScript/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="LibreriasScript/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="LibreriasScript/jqwidgets/demos.js"></script>
    <script type="text/javascript" src="LibreriasScript/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="LibreriasScript/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="LibreriasScript/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="LibreriasScript/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="LibreriasScript/jqwidgets/globalization/globalize.js"></script>

    <script src="LibreriasScript/FuncionesReporte.js"></script>
    <title>JusTime</title>
</head>
<body  onload="LlenarCombo()">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="Home.html" class ="navbar-brand" style="width:150px; height:65px">                
                <img src="Recursos/JusTimeHome.png" height="auto" width=100%" /></a>
                
            </div>            
        </div>
    </div>
  <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="Informacion" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               
                         <table style="width: 500%;" >
                                <tr  id="heading" >
                                    
                                </tr>
                         </table>
                    
                </div>
                <div class="modal-body">
                    <div class="panel panel-info">
                        <div class="panel-heading"></div>
                            <div class="panel-body">
                                General 
                                <div align="center">                                                                      
                                    <table id="Recorrido" class="table table-hover">      
                                      <tr id="Tr1"  class="active">
                                        <td><B>Recorrido</B></td>   
                                        <td><B>Salida</B></td>
                                        <td ><B>Llegada</B></td> 
                                        <td ><B>Tiempo(min)</B></td>                                                                 
                                     </tr>
                                    </table> 

                                       <div>
                                        <table id="Reloj" class="table table-hover"> 
                                            <tr class="active">
                                            <td><B>Reloj</B></td>   
                                            <td><B>Hora</B></td>
                                        </tr>
                                        </table> 
                                    </div>
                                      
                                    </div>
                             
                                </div>
                         
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
  
    <table style="width: 650px;" >
                    <tr>
                        <td style="width: 50px;" align="left">Fecha:</td>
                        <td style="width: 400px;"><div align="center">
                                <div id="Fecha"></div>    
                            </div>  
                        </td>
                        <td style="width: 200px;" align="left"> 
                            <div align="center">
                            <div class="btn-group">
                                 <button id="ruta" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" >
                                      Rutas <span class="caret"></span>
                                 </button>
                             <ul id="tRutaInfo" class="dropdown-menu">
                             </ul>
                            </div>
                            </div>

                        </td>
                    </tr>                   
     </table>

     
    <br /><br /> 
     
    <table id="reporte" class="table table-hover">      
        <tr id="celda"  class="active">
            <td><B>Numero</B></td>   
            <td><B>Placa</B></td>
            <td ><B>Nombre</B></td> 
            <td ><B>Recorridos</B></td> 
            <td ><B>Coleo(min)</B></td>                           
        </tr>
    </table>         
</body>
</html>
